<!-- 批发采购订单列表 -->
<template>
  <div class="purchasing-purchase-wholesale">
    <el-container class="registercard-box">
      <!-- 输入框模块 -->
      <el-header
        height="auto"
        class="header-limit">
        <tabs
          :tabs-arr="tabList"
          @returnIndex="handleReturnIndex" />
        <el-form
          ref="wholesalepurchase"
          :inline="true"
          label-width="155px"
          class="demo-ruleForm"
          :model="wholesalepurchase"
        >

          <el-form-item
            label="采购单号"
            prop="purchaseOrderCode">
            <el-input
              placeholder="请输入"
              v-model="wholesalepurchase.purchaseOrderCode"
            />
          </el-form-item>
          <!-- 1 -->
          <!-- <el-form-item
            label="关联订单号"
            prop="purchaseOrderCode">
            <el-input
              placeholder="请输入"
              v-model="wholesalepurchase.purchaseOrderCode"
            />
          </el-form-item> -->
          <el-form-item
            label="供应商"
            prop="supplierName">
            <el-input
              placeholder="请输入"
              v-model="wholesalepurchase.supplierName"
            />
          </el-form-item>
          <!-- <el-form-item
            label="医院订单编号"
            prop="externlCode">
            <el-input
              placeholder="请输入"
              v-model="wholesalepurchase.externlCode"
            />
          </el-form-item> -->
          <el-form-item
            label="创建时间"
            prop="submitDateArr">
            <el-date-picker
              v-model="wholesalepurchase.submitDateArr"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm">
              <i class="el-icon-refresh-right" />
              重置</el-button
              >
            <ElButtonLoading
              :loading='submitLoading'
              @searchForm='searchForm'
            />
          </el-form-item>
        </el-form>
      </el-header>
      <!-- 表单模块 -->
      <el-editable
        class="hospital-edit-box"
        v-loading="wholesalepurchase.tableLoading"
        :data="table.settlemList"
        height="200"
        :columns="releasecolumns"
      >
        <template
          slot="default-dingdan"
          slot-scope="scope">
          <span class="price">{{
            scope.row.dingdan | getFormatterPrice
          }}</span>
        </template>
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            type="text"
            @click="goSubmit(scope)"
            v-if="scope.row.purchaseOrderStatus === 11">
            提交</el-button>

          <el-button
            type="text"
            @click="substituteShipment(scope)"
            v-if="scope.row.purchaseOrderStatus === 2||scope.row.purchaseOrderStatus ===3"
          >
            收货</el-button
            >
          <el-button
            type="text"
            @click="goRevoke(scope)"
            v-if="scope.row.purchaseOrderStatus === 1"
          >
            撤销</el-button
            >
          <!-- <el-button
            type="text"
            @click="goQualityTesting(scope)"
            v-if="(scope.row.purchaseOrderStatus===8|| scope.row.purchaseOrderStatus===3)"
          >
            质检</el-button
            > -->
          <!-- <el-button
            type="text"
            @click="goHarvest(scope)"
            v-if='scope.row.purchaseOrderStatus===3||scope.row.purchaseOrderStatus===9'
          >
            入库
          </el-button> -->
          <el-button
            type="text"
            @click="goDetail(scope)">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->

      <el-pagination
        align="right"
        style="margin-top:20px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :page-sizes="page.PAGE_NUMBER"
        :page-size="page.size"
        :current-page="page.page"
        :layout="page.PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
  </div>
</template>

<script>
import tabs from '@components/tabs'
import { releasecolumns, tabList } from './const'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import paginationMixin from '@mixins/paginationMixin'
import { getCertificateList } from '@const/api'
import ElEditable from '@components/el-editable'
import { authItemInStoreQuery } from '@const/productCenterApiV2'
import { formatDate, getFormatterPrice } from '@const/filter.js'
import { hasIn } from 'lodash'
import { deliverySixSaleOrder, hossynPssPsOrderYyPssPsPurchaspageList, hossynPssPsOrderYyPssPsPurchaseGetOrder,
  hossynPssPsOrderYyPssPsPurchaseOrderGetById } from '@const/beforeSettleApi'
import ElButtonLoading from '@components/el-button-loading'
export default {
  name: 'Purchasingpurchasewholesale',
  mixins: [paginationMixin],
  components: { ElEditable, tabs, ElButtonLoading },
  data () {
    return {
      tabList,
      activeName: '1',
      submitLoading: false,
      wholesalepurchase: {
        submitDateArr: [], // 有效期至
        tableLoading: false,
        supplierName: '', // 配送商
        purchaseOrderCode: '' // M平台订单编号
      },
      tabIndex: 11,
      table: {
        settlemList: []
      },
      releasecolumns,
      page: {
        PAGE_NUMBER,
        PAGINATION_LAYOUT
      }
    }
  },
  filters: {
    getFormatterPrice
  },
  created () {
    this.tabList.forEach(item => {
      item.badge.value = null
    })
  },
  mounted () {
    this.getItems()
    this.getAllStatusNumer()
  },
  methods: {
    // 获取列表
    getItems () {
      // Loading加载开始
      this.wholesalepurchase.tableLoading = true
      this.submitLoading = true
      // 请求列表数据
      this.$axios({
        method: 'post',
        url: hossynPssPsOrderYyPssPsPurchaspageList,
        data: {
          ...this.wholesalepurchase,
          page: this.page.page,
          pageSize: this.page.size,
          orderStatus: this.tabIndex,
          startTime:
            formatDate(this.wholesalepurchase.submitDateArr[0], 'YYYY-MM-DD') ||
            null,
          endTime:
            formatDate(this.wholesalepurchase.submitDateArr[1], 'YYYY-MM-DD') ||
            null
        }
      })
        .then(res => {
          let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
          this.table.settlemList = obj.content
          this.page.total = obj.totalElements
        })
        .finally(res => {
          this.submitLoading = false
          this.wholesalepurchase.tableLoading = false
        })
    },
    // 点击tab切换时触发
    handleClick (val) {
      this.activeName = val.paneName
    },
    // 重置
    resetForm () {
      this.$refs.wholesalepurchase.resetFields()
    },
    // 查询
    searchForm () {
      this.page.page = 1
      this.getItems()
    },
    getAllStatusNumer () {
      this.$axios({
        method: 'get',
        url: hossynPssPsOrderYyPssPsPurchaseGetOrder,
        params: {}
      }).then(res => {
        let arr = hasIn(res, 'data.payload') ? res.data.payload : []
        if (!arr.length) {
          return
        }
        this.tabList.forEach(item => {
          arr.forEach(ite => {
            if (item.name === Number(ite.orderStatus)) {
              item.badge.value = ite.orderCount
              return
            }
            if (item.name === 0) {
              item.badge.value += ite.orderCount
            }
          })
        })
      })
    },
    // 跳转至详情
    goDetail (data) {
      this.$router.push({
        path:
          '/distributorSide/purchasingManagement/purchaseOrderTracking/wholesalePurchaseOrder/detail',
        query: {
          id: data.row.id,
          purchaseOrderStatus: data.row.purchaseOrderStatus
        }
      })
    },

    // 提交
    goSubmit (data) {
      this.$router.push({
        path:
          '/distributorSide/purchasingManagement/purchaseOrderTracking/wholesalePurchaseOrder/submission',
        query: {
          id: data.row.id,
          purchaseOrderStatus: data.row.purchaseOrderStatus
        }
      })
    },
    // 收货
    substituteShipment (data) {
      this.$router.push({
        path:
          '/distributorSide/purchasingManagement/purchaseOrderTracking/wholesalePurchaseOrder/receive',
        query: {
          id: data.row.id
        }
      })
    },
    // 质检
    goQualityTesting (e) {
      this.$router.push({
        path:
          '/distributorSide/purchasingManagement/purchaseOrderTracking/wholesalePurchaseOrder/quality',
        query: {
          id: e.row.id,
          purchaseOrderStatus: e.row.purchaseOrderStatus
        }
      })
    },
    // 入库
    goHarvest (e) {
      this.$router.push({
        path: '/distributorSide/purchasingManagement/purchaseOrderTracking/wholesalePurchaseOrder/receive',
        query: {
          id: e.row.id,
          purchaseOrderStatus: e.row.purchaseOrderStatus
        }
      })
    },
    // tab切换触发
    handleReturnIndex (index) {
      this.tabIndex =
        this.tabList[index].name === null ? '' : this.tabList[index].name
      this.page.page = 1
      this.getItems()
    },
    goRevoke (data) {
      this.$axios({
        method: 'post',
        url: hossynPssPsOrderYyPssPsPurchaseOrderGetById,
        data: {
          id: data.row.id,
          purchaseOrderStatus: 7
        }
      })
        .then(res => {
          let code = hasIn(res, 'data.code') ? res.data.code : ''
          if (code === '0') {
            this.$message({
              type: 'success',
              message: '撤销成功'
            })
            this.getItems()
          } else {
            this.$message({
              type: 'warning',
              message: '撤销失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'warning',
            message: '撤销失败'
          })
        })
    }
  }

  // 获取列表
}
</script>
<style lang="less">
.purchasing-purchase-wholesale {
  height: 100%;
  display: flex;

  .registercard-box {
    // flex-direction: column
    .el-form-item__label {
      width: 110px !important;
    }
    .price {
      color: #000;
    }
    .gutter {
      display: block !important;
    }
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .is-active {
          font-size: 24px;
        }
      }
    }
  }
  .header-limit {
    .el-input__inner {
      width: 200px;
    }
    .el-date-editor {
      width: 368px;
    }
  }
}
</style>
